<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>响应式</title>
    <!-- <script src="./vue.global.js"></script> -->
    <!--引入vue2开发版本的vue核心包-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <!-- 引入 ECharts -->
    <script src="./echarts.js"></script>
</head>

<!--
生命周期钩子函数
小黑记事本
渲染页面
添加
删除
饼图

-->
<style>
    .fontRed {
        color: red;
    }

    #bing {
        width: 500px;
        height: 500px;
    }
</style>

<body>
    <div id="app">
        <div>
            <input v-model.trim="name" placeholder="请输入名称" /> <input v-model.number="price" placeholder="请输入价格" />
            <button v-on:click="addBill">添加账单</button>
        </div>
        <div>
            <table>
                <thead>
                    <tr>
                        <td>编号</td>
                        <td>消费名称</td>
                        <td>消费价格</td>
                        <td>操作</td>
                    </tr>
                </thead>
                <tbody v-if="bills.length > 0">
                    <tr v-for="(item,index) in bills" :key="item.id">
                        <td>{{ index+1 }}</td>
                        <td>{{ item.name }}</td>
                        <td v-bind:class="{fontRed:item.price.toFixed(2)>= 50.00}">{{ item.price.toFixed(2) }}</td>
                        <td><a v-on:click.prevent="del(item.id)">删除</a></td>
                    </tr>
                </tbody>
                <tbody v-else>
                    <tr>
                        <td>我是有底线的</td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td>消费总计：{{ sumPrice }}</td>
                    </tr>
                </tfoot>
            </table>
            <div id="bing"></div>
        </div>
    </div>

    <script>
        const app = new Vue({
            el: '#app',
            data: {
                bills: [],
                name: '',
                price: ''
            },
            methods: {
                async getBillList() {
                    // get请求需要 有params 参数包裹
                    const res = await axios.get("http://localhost:9700/api/rest/boot/bills", {
                        params: {
                            name: "测试请求"
                        }
                    })
                    this.bills = res.data

                    // 数据加载好了之后重新 setOption 渲染饼图
                    this.myChart.setOption({
                        series: [{
                            data: this.bills.map(item => ({ name: item.name, value: item.price }))
                        }]
                    })
                },
                async addBill() {
                    const res = await axios.post("http://localhost:9700/api/rest/boot/bills", {
                        name: this.name,
                        price: this.price
                    })
                    console.log(res)
                    this.getBillList()
                    this.name = ''
                    this.price = ''
                },
                async del(ids) {
                    console.log(ids)
                    const res = await axios.delete("http://localhost:9700/api/rest/boot/bills", {
                        params: {
                            id: ids
                        }
                    })
                    console.log(res)
                    this.getBillList()
                }


            },
            computed: {
                sumPrice() {
                    console.log("开始计算总价格")
                    return this.bills.reduce((sum, item) => sum + item.price, 0)
                }
            },
            created() {
                console.log("响应式数据已创建好", this.bills)
                this.getBillList()
            },
            mounted() {
                // dom准备好了之后，才初始化echarts实例
                this.myChart = echarts.init(document.getElementById("bing"))
                const option = {
                    title: {
                        text: '消费记录',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },
                    series: [
                        {
                            // name: '消费账单',
                            type: 'pie',
                            radius: '50%',
                            data: [],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                }
                this.myChart.setOption(option)
            }

        })

    </script>

</body>

</html>